$(function() {
    var page = 1;
    var html = "";
    var This = null;



    // 先获取用户搜索后跳转过来的地址栏的keyword 
    // 封装获取参数的函数
    function getParameter(key) {
        // var url = location.href;  //获取url
        var parameter = location.search.substr(1); //切割掉？，获取参数字符串
        parameter = parameter.split('&');
        var obj = {};
        for (var i = 0; i < parameter.length; i++) {
            var current = parameter[i].split('=');
            obj[current[0]] = current[1];

        }
        // console.log(obj);
        if (key) {
            return obj[key];
        } else {
            return obj;
        }

    };
    // 获取用户搜索的关键字，根据关键字请求数据
    var keyword = getParameter("keyword");
    // console.log(keyword);


    // 获取到用户输入的关键字，然后去请求数据，渲染页面


    function getData() {
        if (!This) {
            This = this; //把MUI初始化时， callback: getData 的this赋给This
        }
        $.ajax({
            type: 'get',
            url: '/product/queryProduct',
            data: {
                proName: keyword,
                page: page++,
                pageSize: 3,
                price: priceSort, //价格排序
                num: salesSort, //库存排序
            },
            success: function(res) {
                // console.log(res);
                console.log("page", page);
                html += template('tem-search-res', res);
                $('#search-res').html(html);
                // 这里的This必须指向mui，因为这是MUI的方法
                // 加载完新数据后，需要执行endPullupToRefresh()方法，
                if (res.data.length == 0) {
                    // 当参数为true时，请求完毕，提示没有更多数据
                    This.endPullupToRefresh(true);
                } else {
                    // 当参数为false时，结束“正在加载...”的过程
                    This.endPullupToRefresh(false);
                }
            }
        });
    };

    // 上拉加载，每次上拉回调函数调用getData函数   MUI框架自带
    mui.init({
        pullRefresh: {
            container: '.result-content', //上拉加载区域，querySelector能定位的css选择器均可，比如：id、.class等
            up: {
                height: 50, //可选.默认50.触发上拉加载拖动距离，距离越小越灵敏
                auto: true, //可选,默认false.刷新后自动上拉加载一次
                contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            },
        },
    });


    // 轻敲事件，点击价格按钮，根据价格升序为1，降序为2重新渲染数据
    var priceSort = 1; //记录升序还是降序，默认升序
    $('#price-sort').on('tap', function() {
        // 点击改变排序方式
        priceSort = priceSort == 1 ? 2 : 1; //三元表达式记得赋值
        // 初始化以前数据，重新发送请求，渲染页面
        page = 1;
        html = "";
        // 重置上拉加载
        mui('.result-content').pullRefresh().refresh(true);
        getData();
    });
    // 点击销量按钮，根据销量升序为1，降序为2重新渲染数据
    var salesSort = 2; //记录升序还是降序，默认降序
    $('#sales-sort').on('tap', function() {
        salesSort = salesSort == 2 ? 1 : 2; //三元表达式
        console.log(salesSort);
        // 初始化以前数据，重新发送请求，渲染页面
        page = 1;
        html = "";
        // 重置上拉加载
        mui('.result-content').pullRefresh().refresh(true);
        getData();
    });

});